import styles from "../css/TodoItem.module.css";

interface Item {
  content: string;
  isCompleted: boolean;
  time: string;
}

interface ItemProps {
  item: Item;
}

function TodoItem({ item }: ItemProps) {
  // 删除按钮对应的回调
  const closeHandler = (item: Item) => {
    console.log("删除按钮被点击了", item);
  };

  // 修改待办事项的完成状态
  const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log("待办事项的状态被修改了", e.target.checked);
  };

  return (
    <div className={styles.item}>
      {/* 待办事项详情 */}
      <div>
        {/* 普通显示详情 */}
        <span>
          {/* 复选框 */}
          <input
            type="checkbox"
            className={styles.checkbox}
            checked={item.isCompleted}
            onChange={changeHandler}
            value={item.content}
          />
          {/* 待办内容 */}
          <span
            className={`${styles.pointer} ${
              item.isCompleted ? styles.del : ""
            }`}
          >
            {item.content}
          </span>
          {/* 发布时间 */}
          <span className={styles.time}>{item.time}</span>
        </span>
      </div>
      {/* 删除按钮 */}
      <div className={styles.close} onClick={() => closeHandler(item)}>
        X
      </div>
    </div>
  );
}

export default TodoItem;
